
import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { 
  FolderOpen, 
  Calendar, 
  User, 
  MoreHorizontal,
  ExternalLink,
  Zap
} from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { format } from "date-fns";

export default function RecentProjects({ projects, isLoading }) {
  const getStatusBadge = (status) => {
    const statusConfig = {
      planning: { color: "bg-gray-100 text-gray-700 border-gray-200", label: "规划中" },
      approved: { color: "bg-blue-100 text-blue-700 border-blue-200", label: "已批准" },
      construction: { color: "bg-green-100 text-green-700 border-green-200", label: "施工中" },
      completed: { color: "bg-purple-100 text-purple-700 border-purple-200", label: "已完成" },
      suspended: { color: "bg-red-100 text-red-700 border-red-200", label: "暂停" }
    };
    
    const config = statusConfig[status] || statusConfig.planning;
    return (
      <Badge variant="outline" className={`${config.color} border font-medium`}>
        {config.label}
      </Badge>
    );
  };

  const getVoltageColor = (voltage) => {
    const colors = {
      "110kV": "text-blue-600",
      "220kV": "text-green-600", 
      "330kV": "text-orange-600",
      "500kV": "text-red-600",
      "750kV": "text-purple-600",
      "1000kV": "text-pink-600"
    };
    return colors[voltage] || "text-gray-600";
  };

  return (
    <Card className="shadow-lg border-0">
      <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 border-b">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2 text-lg">
            <FolderOpen className="w-5 h-5 text-blue-600" />
            近期项目
          </CardTitle>
          <Link to={createPageUrl("Projects")}>
            <Button variant="outline" size="sm" className="flex items-center gap-1">
              查看全部
              <ExternalLink className="w-3 h-3" />
            </Button>
          </Link>
        </div>
      </CardHeader>
      
      <CardContent className="p-0">
        {isLoading ? (
          <div className="p-6 space-y-4">
            {Array(3).fill(0).map((_, i) => (
              <div key={i} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center gap-4">
                  <Skeleton className="w-12 h-12 rounded-lg" />
                  <div>
                    <Skeleton className="h-4 w-32 mb-2" />
                    <Skeleton className="h-3 w-24" />
                  </div>
                </div>
                <Skeleton className="h-6 w-16" />
              </div>
            ))}
          </div>
        ) : projects.length === 0 ? (
          <div className="p-12 text-center">
            <FolderOpen className="w-12 h-12 text-gray-300 mx-auto mb-4" />
            <p className="text-gray-500 mb-4">暂无项目数据</p>
            <Link to={createPageUrl("Projects")}>
              <Button className="bg-blue-600 hover:bg-blue-700">
                创建第一个项目
              </Button>
            </Link>
          </div>
        ) : (
          <div className="divide-y divide-gray-100">
            {projects.slice(0, 5).map((project) => (
              <div key={project.id} className="p-6 hover:bg-gray-50 transition-colors duration-200">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
                      <Zap className="w-6 h-6 text-blue-600" />
                    </div>
                    
                    <div>
                      <Link to={createPageUrl(`ProjectDetail?id=${project.id}`)}>
                        <h3 className="font-semibold text-gray-900 mb-1 hover:text-blue-600 transition-colors">{project.projectName}</h3>
                      </Link>
                      <div className="flex items-center gap-4 text-sm text-gray-500">
                        <div className="flex items-center gap-1">
                          <Zap className={`w-3 h-3 ${getVoltageColor(project.voltageLevel)}`} />
                          <span className={`font-medium ${getVoltageColor(project.voltageLevel)}`}>
                            {project.voltageLevel}
                          </span>
                        </div>
                        {project.totalLength && (
                          <span>{project.totalLength}km</span>
                        )}
                        {project.projectManager && (
                          <div className="flex items-center gap-1">
                            <User className="w-3 h-3" />
                            <span>{project.projectManager}</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    {getStatusBadge(project.status)}
                    <Button variant="ghost" size="icon" className="w-8 h-8">
                      <MoreHorizontal className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
                
                {(project.startDate || project.endDate) && (
                  <div className="mt-3 pt-3 border-t border-gray-100">
                    <div className="flex items-center gap-4 text-xs text-gray-500">
                      {project.startDate && (
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          <span>开工: {format(new Date(project.startDate), "yyyy-MM-dd")}</span>
                        </div>
                      )}
                      {project.endDate && (
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          <span>完工: {format(new Date(project.endDate), "yyyy-MM-dd")}</span>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
